<template>
  <el-card class="box-card" ref="boxCard" :class="{ 'fullscreen': fullscreen }" >
    <div slot="header" style="text-align:center;padding: 20px 10px;" ref="header">
      <el-button-group style="float: left">
        <el-button type="primary" icon="el-icon-full-screen" title="点击全屏展示" v-show="!fullscreen" @click="doFullscreen"></el-button>
        <el-button type=""  v-show="!fullscreen" >当前翻页周期:{{pageChangeData}}秒</el-button>
      </el-button-group>
      <span style="font-size: xx-large;color: #fff;">{{config.name}}</span>
      <div style="float: right;    text-align: right;font-weight: bold;color: #fff">
        <span style="">{{nowTime}}</span>

        <p>
          <!-- 合计区域-->
          <span style="padding-right: 30px" v-for="sumColumn in sumData" :key="sumColumn.field"><strong>{{sumColumn.label}}：</strong>{{strings.defaultIfBlank(sumColumn.sum,0)}}</span>

          <span><strong>任务数量：</strong>{{pager.total}}</span>
        </p>
      </div>
    </div>
    <el-table :data="data" header-cell-class-name="headerCellClassName">
      <el-table-column type="index"  :index ="getIndex" align="center" width="60" fixed="left" />

     <!-- 数据列-->
      <el-table-column :show-overflow-tooltip="true" v-for="field in gridFields "  :key="field.field" :prop="field.field" :label="field.label" :width="field.width" :align="field.align">
        <template slot-scope="scope">
          <template>
            <div :style="getColumnClass(scope.row,field.field)">{{scope.row[field.field]}}</div>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination ref="pager"
      background
      layout="prev, pager, next"
       highlight-current-row
      :total="pager.total"
      :page-size="pager.size"
      :page-count="pager.count"
      :current-page="pager.current"
      @current-change="currentChange"
    >
    </el-pagination>
  </el-card>
</template>
<script>
import reportClassFuns from '@/util/const/reportClassFuns.js'

export default {
  data() {
    return {
      config: {},
      data: [],
      sumData: [],
      gridFields: [],
      pager: {
        total: 0,
        size: 5,
        count: 0,
        current: 1
      },
      nowTime: '',
      //翻页周期，未定义，则默认为 10秒钟
      pageChangeData: 10,

      //定时器是否开启
      isTimerBegin: false,
      timers: [],
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度

      //是否全屏展示
      fullscreen: false
    }
  },
  methods: {
    /*eslint-disable*/
    //手动翻页
    currentChange(current){
      this.pager.current = current
      this.fetchData()
    },

    //加载数据
    fetchData() {
      if (this.strings.isBlank(this.propReportKey)) {
        return
      }
      
      if(this.pager.current > this.pager.count) this.pager.current = 1

      let params = {
        currPage: this.pager.current ,
        pageSize: this.pager.size ,
      }
      let url = `/report/config/fetchData?reportKey=${this.propReportKey}`
      this.$ajax.get(url, {params}).then(resp => {
        this.config = resp.data.config
        this.gridFields = resp.data.gridFields
        this.data = resp.data.data
        this.sumData = resp.data.sumData
        this.pager.total = parseInt(resp.data.totalCount)
        this.pageChangeData = parseInt(this.config.rollCycle)
        this.loadPager()
        this.timerBegin()
      })
    },

    //更新分页
    loadPager(){
      if(this.data == null || this.data.length <1) {
        this.pager = {
          total: 0,
            size: 0,
            count: 0,
            current: 0
        }
        return
      }
      this.pager.count = Math.ceil(this.pager.total / this.pager.size )
    },

    //序号列
    getIndex(index){
      return index + (this.pager.current-1)*this.pager.size;
    },
    //根据窗口高度变化，设置每页显示数量
    changeSizeByHeight(){
      if(this.isFullScreen()){
        this.fullscreen = true
      }else{
        this.fullscreen = false
      }
      let header = this.$refs.header.offsetHeight
      let tableH = this.windowHeight - 300
      if(this.fullscreen){
        tableH = this.windowHeight - 180
      }
      if (tableH < 200) {
        tableH = 200
      }    
      this.pager.size = parseInt(tableH / 40)
    },

    //判断是否全屏
    isFullScreen() {
      return  !! (
        document.fullscreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen ||
        document.webkitFullScreen ||
        document.msFullScreen
      );
    },
    //最大化
    doFullscreen(){
      let de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
      this.fullscreen = true
      this.$notify({
        title: '友情提示',
        message: '您可以按下【esc按键】退出全屏噢',
        offset: 333,
        showClose: false,
        position: 'top-left'
      });
      this.changeSizeByHeight()
    },
    //取消最大化
    doUnFullscreen(){
      let de= document.documentElement;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
      this.fullscreen = false
      this.changeSizeByHeight()
    },

    getNow() {
      let now =new Date()
      let year = now.getFullYear();
      let month =now.getMonth() + 1 < 10? "0" + (now.getMonth() + 1): now.getMonth() + 1;
      let date =now.getDate() < 10? "0" + now.getDate(): now.getDate();
      let hh =now.getHours() < 10? "0" + now.getHours(): now.getHours();
      let mm =now.getMinutes() < 10? "0" + now.getMinutes(): now.getMinutes();
      let ss =now.getSeconds() < 10? "0" + now.getSeconds(): now.getSeconds();
      this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm+':'+ss ;
    },

    //开启定时器
    timerBegin(){
      if(this.isTimerBegin) return

      //翻页定时器
      let timer1 = setInterval(() => {
        this.pager.current++
        this.fetchData()
      }, this.pageChangeData * 1000)
      this.timers.push(timer1)

      //日期定时器
      let timer2 = setInterval(() =>{
        this.getNow()
      },1000);
      this.timers.push(timer2)

      this.isTimerBegin = true
    },

    //结束定时器
    timerEnd(){
      if(this.timer2 && this.timer2.length > 1){
        this.timer.foreach( time => {
          clearInterval(this.time)
        })
      }
    },

    //获取列样式
    getColumnClass(rowData, fieldName) {
      let getClassFun = this.config.getClassFun
      if(!getClassFun) return {}
      return reportClassFuns[getClassFun](rowData, fieldName)
    }
  },
  mounted() {
    this.changeSizeByHeight()
    this.fetchData()

    var that = this;
    //窗口改变，刷新数据
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.windowHeight = window.fullHeight;  // 高
        that.changeSizeByHeight()
        this.fetchData()
      })()
    };

    //按esc取消全屏
    this.$nextTick(function () {
      document.addEventListener('keyup', function (e) {
        if (e.keyCode == 27) {
          that.doUnFullscreen()
        }
      })
    })

  },
  beforeDestroy() {
    this.timerEnd()
  },
  props: {
    propReportKey: {
      type: String
    }
  }
}
</script>

<style lang='scss' scoped>
  .box-card {
    width: 100%;
    height: 100%;
    background-color: #07173B;

    /*
    表格标题
    表格区域
    */
    /deep/ .el-table{
        .cell{
          font-size: 14px !important;
          color:white;
        }
        tr {
          //background-color: #0077aa!important;
          background-color: #07173B;
        }
        th,td {
          border-bottom: none !important;
        }
        //hover效果
        tbody tr:hover>td { background-color: #C0C4CC !important; }

        .headerCellClassName{
          background-color: #07173B !important;
        }
    }
  }

  .fullscreen{
    position: absolute !important;
    width: 100%  !important;
    height: 100%  !important;
    top: 0px  !important;
    left: 0px  !important;
  }


</style>
